<template>
  <el-form>
    <el-button type="success" icon="el-icon-edit" style="float:right;margin: 20px 0;" @click="createDialog=true">新增试题</el-button>
    <el-form-item label="学科">
      <el-select v-model="formData.subject" placeholder="请选择">
        <el-option v-for="(item,key) in subjectList" :key="key" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <el-form-item label="关键字">
      <el-input placeholder="根据题干搜索" style="width:300px" />
    </el-form-item>

    <el-alert
      :title="`共${total}条记录`"
      type="info"
      show-icon
      :closable="false"
      style="margin:20px 0"
    />
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >

      <el-table-column
        prop="number"
        label="试题编号"
        width="180"
      />
      <el-table-column
        prop="subject"
        label="学科"
        width="100"
      />
      <el-table-column
        prop="catalog"
        label="目录"
      />
      <el-table-column
        prop="questionType"
        label="题型"
      />
      <el-table-column
        prop="question"
        label="题干"
      >
        <template v-slot="{ row }">
          <span v-html="row.question" />
        </template></el-table-column>

      <el-table-column
        prop="addDate"
        label="录入时间"
      />
      <el-table-column
        prop="difficulty"
        label="难度"
      />
      <el-table-column
        prop="creator"
        label="录入人"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button
            type="success"
            icon="el-icon-view"
            circle
            @click="handleWatch(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
import { getBaseAPI } from '@/api/practice'
// import { intersectionTypeAnnotation } from '@babel/types'
export default {
  name: 'Base',
  data() {
    return {
      // 新增弹框
      createDialog: false,
      // 学科下拉选项
      subjectList: [],
      total: '',
      // 列表数据
      tableData: [],
      // 表单数据
      formData: {
        subject: ''
      }
    }
  },
  created() {
    this.getBaseList()
  },
  methods: {
    async getBaseList() {
      const resp = await getBaseAPI(1, 10)
      console.log(resp)
      // 拿到对象数组中的值
      for (const [index, item] of resp.items.entries()) {
        console.log(index, item)
        item.difficulty = +item.difficulty ? '简单' : '困难'
        item.questionType = +item.questionType ? '单选' : '多选'
        this.subjectList.push(item.subject)
      }
      this.tableData = resp.items
      this.total = resp.counts
    },

    handleWatch() {

    }

  }

}
</script>

<style>

</style>
